<template>
    <el-dialog title="操作权限" width="800px" :visible="operatingAuthorizationBloon" :before-close="handleCloseLink"
        :close-on-click-modal="false" append-to-body :destroy-on-close="true">
        <div>
            <el-container>
                <el-aside width="200px">
                    <el-input placeholder="请输入内容" v-model="dirName" size="small" 
                        class="appleftInfut">
                        <el-button slot="append" icon="el-icon-search" @click="getDirTreeInfo()"></el-button>
                    </el-input>
                    <el-tree :data="treeListData" show-checkbox node-key="id" default-expand-all
                        :expand-on-click-node="false"  @node-click="handleNodeClick">
                    </el-tree>
                </el-aside>
                <el-main>
                    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" max-height="680"
            class="TableStyle">
            <el-table-column show-overflow-tooltip label="操作" prop="authorName" />
            <el-table-column label="授权" width="250">
                <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.caozuo"></el-checkbox>
                </template>
            </el-table-column>
        </el-table>
                </el-main>
            </el-container>
        </div>
        <div class="dialog-footer">
            <el-button size="medium" @click="handleCloseLink" class="bootonclose">取 消</el-button>
            <el-button size="medium" type="primary" @click="handleUpdate" class="bootonok">
                确定
            </el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: "operatingAuthorization",
    props: {
        operatingAuthorizationBloon: {
            type: Boolean
        },
    },
    emits: ["closeopenAuthorization"],
    data() {
        return {
            //搜索框
            dirName: '',
            //树
            treeListData:[],
            postList:[
                {
                    authorName:'新建',
                    caozuo:true,
                },
                {
                    authorName:'查看',
                    caozuo:true,
                },
                {
                    authorName:'编辑',
                    caozuo:true,
                },
                {
                    authorName:'删除',
                    caozuo:true,
                }, {
                    authorName:'批量删除',
                    caozuo:true,
                },

            ]
        };
    },
    mounted() {
    },
    methods: {
        handleCloseLink() {
            this.$emit("closeopenAuthorization");
        },
        handleUpdate() {
            this.$emit("closeopenAuthorization",);
        },
        //搜索
        getDirTreeInfo() {

        },
        //树的节点被点击的时候
        handleNodeClick(data) {
            console.log(data, "被点击le");
        },
    }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/CommonStyle.scss";

aside {
    background-color: #fff;
}
.appleftInfut{
    width: 165px !important;
}
</style>
  